<template>
  <div id="art_item">
    <van-cell :to="'/article/' + articleItem.art_id">
      <template #title>
        <div class="van-multi-ellipsis--l2">
          {{ articleItem.title }}
        </div>
      </template>
      <template #label>
        <div class="label_image" v-if="articleItem.cover.type === 3">
          <van-image
            v-for="(item, index) in articleItem.cover.images"
            :key="index"
            fit="cover"
            :src="item"
          />
        </div>
        <div class="label_box">
          <span>{{ articleItem.aut_name }}</span>
          <span>{{ articleItem.pubdate | formatDate }}</span>
          <span>评论：{{ articleItem.comm_count }}</span>
        </div>
      </template>
      <template>
        <van-image
          v-if="articleItem.cover.type === 1"
          class="right_image"
          fit="contain"
          :src="articleItem.cover.images[0]"
        />
      </template>
    </van-cell>
  </div>
</template>

<script>
export default {
  name: 'ArticleItem',
  data () {
    return {}
  },
  props: {
    articleItem: {
      type: Object,
      required: true
    }
  },

  // 定义方法
  methods: {}
}
</script>

<style scoped lang="less">
#art_item {
  .label_box {
    span:nth-child(2) {
      margin: 0 8px;
    }
  }
  .van-cell__value {
    flex: unset;
  }
  .van-cell__value,
  .right_image {
    width: 232px;
    height: 146px;
  }
  .label_image {
    display: flex;
    .van-image {
      width: 232px;
      height: 146px;
    }
    .van-image:nth-child(2) {
      margin: 0 4px;
    }
  }
}
</style>
